<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Conent-Teype" charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style type="text/css">
* {
	margin: 0;
	padding: 0px;
}
.wrap {
	width: 800px;
	height: 740px;
	background: #ffff99;
	margin: 30px auto;
}
.wrap ul li {
	list-style-type: none;
	width: 350px;
	height: 200px;
	float: left;
	margin: 20px;
	color: #fff;
	font-size: 40px;
	text-align: center;
	line-height: 200px;
	font-family: "微软雅黑";
	position: relative;/*相对定位*/
}
.wrap .l1 {
	background: #d44825;
}
.wrap .l2 {
	background: #2d8af1;
}
.wrap .l3 {
	background: #0cc5e7;
}
.wrap .l4 {
	background: #666;
}
.wrap .l5 {
	background: #ff6e1a;
}
.wrap .l6 {
	background: #64d500;
}
.wrap li img {
	position: absolute; /*绝对定位*/
	left: 0;
	opacity: 0;/*透明修改0透明1不透明*/
	transition: .8s;
}/*从有到无转换为1秒钟*/
.wrap li:hover img {
	opacity: 1;
}
	
	/*css3动画*/

	/*左右旋转动画*/
	@-webkit-keyframes rot {
 0%, 20%, 40%, 60%, 80%, 100% {
transform-origin:top center;
}
 0% {
transform:rotate(0deg)
}
 20% {
transform:rotate(20deg)
}
 40% {
transform:rotate(-15deg)
}
 60% {
transform:rotate(10deg)
}
 80% {
transform:rotate(-5deg)
}
 100% {
transform:rotate(0deg)
}
}
	/*上下抖动*/

	@-webkit-keyframes tb {
 0% {
top:0px;
}
 20% {
top:20px;
}
 40% {
top:-15px;
}
 60% {
top:10px;
}
 80% {
top:-5px;
}
 100% {
top:0px;
}
}
	/*缩放动画*/
	@-webkit-keyframes sca {
 0% {
transform:scale(1);
}
 20% {
transform:scale(1.1);
}
 40% {
transform:scale(.9);
}
 60% {
transform:scale(1.05);
}
 80% {
transform:scale(.95);
}
 100% {
transform:scale(1);
}
}
.wrap .rot {
	-webkit-animation: rot .8s;
}
.wrap .tb {
	-webkit-animation: tb .8s;
}
.wrap .sca {
	-webkit-animation: sca .8s;
}
</style>
<body>
<!--div 盒子模型-->
<div class="wrap"><!--大边框-->
  <ul>
    <li class="l1">WBE<a href="#"> <img src="img/web.png"/></a> </li>
    <li class="l2">JAVA<a href="#"><img src="img/java.png"/></a></li>
    <li class="l3">日语<img src="img/Jap.png"/></li>
    <li class="l4">IOS<img src="img/ios.png"/></li>
    <li class="l5">SEO<img src="img/seo.png"/></li>
    <li class="l6">电商<img src="img/taobao.png"/></li>
  </ul>
</div>
<script src="js/jquery.js"></script> 
<script>
	var arr = ["rot","tb","sca"]
	var a,b;

		$(".wrap ul li").hover(function()
		{
		/* 当时表划过的时候执行下面的事件*/
		while (b==a)
		{
			a = parseInt( Math.random()*3);
		}
		$(this).addClass(arr[a]);
		b = a ;
		},function(){
		$(this).removeClass(arr[a]);
		/*当鼠标离开的时候执行下面事件*/
		});

		
</script>
</body>
</html>
